// Pop menu is an animated popover relatively positioned to a button / action.
// By default it positions in the middle, but can be anchored left and right.

.kuiPopover {
  display: inline-block;
  position: relative;

  // Open state happens on the wrapper and applies to the panel.
  &.kuiPopover-isOpen {
    .kuiPopover__panel {
      opacity: 1;
      visibility: visible;
      margin-top: $kuiSizeS;
      pointer-events: auto;
    }
  }
}

  // Animation happens on the panel.
  .kuiPopover__panel {
    position: absolute;
    z-index: $kuiZContentMenu;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY($kuiSizeS) translateZ(0);
    backface-visibility: hidden;
    transition:
      opacity $kuiAnimSlightBounce $kuiAnimSpeedSlow,
      visibility $kuiAnimSlightBounce $kuiAnimSpeedSlow,
      margin-top $kuiAnimSlightBounce $kuiAnimSpeedSlow;
    transform-origin: center top;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    margin-top: $kuiSizeL;

    // This fakes a border on the arrow.
    &:before {
      position: absolute;
      content: "";
      top: -$kuiSize;
      height: 0;
      width: 0;
      left: 50%;
      margin-left: -$kuiSize;
      border-left: $kuiSize solid transparent;
      border-right: $kuiSize solid transparent;
      border-bottom: $kuiSize solid $kuiBorderColor;

      @include darkTheme {
        border-bottom-color: $kuiInputBorderColor--darkTheme;
      }
    }

    // This part of the arrow matches the panel.
    &:after {
      position: absolute;
      content: "";
      top: -$kuiSize + 1;
      right: 0;
      height: 0;
      left: 50%;
      margin-left: -$kuiSize;
      width: 0;
      border-left: $kuiSize solid transparent;
      border-right: $kuiSize solid transparent;
      border-bottom: $kuiSize solid #ffffff;

      @include darkTheme {
        border-bottom-color: $kuiBackgroundColor--darkTheme;
      }
    }
  }

.kuiPopover--withTitle .kuiPopover__panel:after {
  border-bottom-color: $kuiColorLightestShade;

  @include darkTheme {
    border-bottom-color: $kuiBackgroundColor--darkTheme;
  }
}

// Positions the menu and arrow to the left of the parent.
.kuiPopover--anchorLeft {
  .kuiPopover__panel {
    left: 0;
    transform: translateX(0%) translateY($kuiSizeS) translateZ(0);

    &:before, &:after {
      right: auto;
      left: $kuiSize;
      margin: 0;
    }
  }
}

// Positions the menu and arrow to the right of the parent.
.kuiPopover--anchorRight {
  .kuiPopover__panel {
    left: 100%;
    transform: translateX(-100%) translateY($kuiSizeS) translateZ(0);

    &:before, &:after {
      right: $kuiSize;
      left: auto;
    }
  }
}
